//banner轮播
var swiper = new Swiper('.swiper-container', {
    loop: true, // 循环模式选项
    autoplay:true,  //自动播放
    //effect: 'cube',

    grabCursor: true,

    cubeEffect: {
        shadow: true,
        slideShadows: true,
        shadowOffset: 20,
        shadowScale: 0.94,
    },
});




//导航按钮
var b = document.querySelector(".t");
var b1 = document.querySelector(".t1");
var d = document.querySelector(".nav .c-1");
var d1 = document.querySelector(".nav .c-1");

b.addEventListener("click",function(){
    b.style.display="block";
    d.style.display = "block";
    b1.style.display="block";
    b.style.display="none";

});
b1.addEventListener("click",function(){
    d1.style.display = "none";
    b.style.display = "block";
    b1.style.display="none";

});





//检测屏幕窗口的尺寸
console.log(window.screen.availWidth);
console.log(window.screen.availHeight);


//检测浏览器窗口的尺寸
console.log(window.innerWidth);
console.log(window.innerHeight);




//导航
var hg1 = document.querySelector("#hg1");
var hg2 = document.querySelector("#hg2");
// var mz = document.querySelectorAll('#mz');

hg1.addEventListener('mouseover',function () {
    document.querySelector("#hg1").innerHTML = "Resume";
    document.querySelector("#hg1").style.color = '#8788b3';
    // document.querySelector("#hg1").innerHTML = "个人简历"
});

hg2.addEventListener('mouseover',function () {
    // document.querySelector("#hg1").innerHTML = "Resume";
    document.querySelector("#hg2").innerHTML = "前端工程师";
    document.querySelector("#hg2").style.color = '#8788b3';
});

hg1.addEventListener('mouseout',function () {
    document.querySelector("#hg1").innerHTML = "Shulan";
    document.querySelector("#hg1").style.color = '#ccc';
    // document.querySelector("#hg1").innerHTML = "个人简历"
});

hg2.addEventListener('mouseout',function () {
    // document.querySelector("#hg1").innerHTML = "Resume";
    document.querySelector("#hg2").innerHTML = "个人简历";
    document.querySelector("#hg2").style.color = '#ccc';
});




//移入移出


var dt_bav_btn = document.querySelector(".main-5 .rr-2 .dt_nav_btn");
var dt_bav_content = document.querySelector("#dt_nav_content");


dt_bav_btn.addEventListener("mouseover",function(){
    dt_bav_content.style.display = "block";
});

dt_bav_btn.addEventListener("mouseleave",function(){
    dt_bav_content.style.display = "none";
});

dt_bav_content.addEventListener("mouseover",function(){
    dt_bav_content.style.display = "block";
});

dt_bav_content.addEventListener("mouseleave",function(){
    dt_bav_content.style.display = "none";
});



var dt_bav_btn1 = document.querySelector(".main-5 .rr-2 .dt_nav_btn1");
var dt_bav_content1 = document.querySelector("#dt_nav_content1");


dt_bav_btn1.addEventListener("mouseover",function(){
    dt_bav_content1.style.display = "block";
});

dt_bav_btn1.addEventListener("mouseleave",function(){
    dt_bav_content1.style.display = "none";
});

dt_bav_content1.addEventListener("mouseover",function(){
    dt_bav_content1.style.display = "block";
});

dt_bav_content1.addEventListener("mouseleave",function(){
    dt_bav_content1.style.display = "none";
});



var dt_bav_btn2 = document.querySelector(".main-5 .rr-2 .dt_nav_btn2");
var dt_bav_content2 = document.querySelector("#dt_nav_content2");


dt_bav_btn2.addEventListener("mouseover",function(){
    dt_bav_content2.style.display = "block";
});

dt_bav_btn2.addEventListener("mouseleave",function(){
    dt_bav_content2.style.display = "none";
});

dt_bav_content2.addEventListener("mouseover",function(){
    dt_bav_content2.style.display = "block";
});

dt_bav_content2.addEventListener("mouseleave",function(){
    dt_bav_content2.style.display = "none";
});


var dt_bav_btn3 = document.querySelector(".main-5 .rr-2 .dt_nav_btn3");
var dt_bav_content3 = document.querySelector("#dt_nav_content3");


dt_bav_btn3.addEventListener("mouseover",function(){
    dt_bav_content3.style.display = "block";
});

dt_bav_btn3.addEventListener("mouseleave",function(){
    dt_bav_content3.style.display = "none";
});

dt_bav_content3.addEventListener("mouseover",function(){
    dt_bav_content3.style.display = "block";
});

dt_bav_content3.addEventListener("mouseleave",function(){
    dt_bav_content3.style.display = "none";
});









var nav = document.querySelector("#nav");
console.log(nav);


var li = document.querySelectorAll(".nav li");
console.log(li);


var toTop = document.querySelector("#toTop");




//划过动画
var d1_1 = document.querySelector("#c1");
var d2 = document.querySelector("#c2");
var d3 = document.querySelector("#c3");
var d4 = document.querySelector("#c4");
var d5 = document.querySelector("#c5");



//滚动条
window.onscroll = function(){

    var t = document.documentElement.scrollTop || document.body.scrollTop;
    console.log(t);



    if(document.documentElement.scrollTop > 700 || document.body.scrollTop){
        nav.classList.add('active1');
    }else if (t == 0 || t < 700){
        nav.classList.remove('active1');
    }

    
    for(var i =0;i<li.length;i++){
        li[i].classList.remove('active');
    }
    if(t< 1500){
        li[0].classList.add('active');
    }else if(t < 2420){
        li[1].classList.add('active');
    }else if(t < 2967){
        li[2].classList.add('active');
    }else if(t < 3524){
        li[3].classList.add('active');
    }else if(t < 4450){
        li[4].classList.add('active');
    }



    if (document.documentElement.scrollTop > 100 || document.body.scrollTop > 100){
        d1_1.classList.add("a");
    }
    if (document.documentElement.scrollTop > 900 || document.body.scrollTop > 900){
        d2.classList.add("a");
    }
    if (document.documentElement.scrollTop > 1200 || document.body.scrollTop > 1300){
        d3.classList.add("a");
    }
    if (document.documentElement.scrollTop > 1900 || document.body.scrollTop > 2000){
        d4.classList.add("a");
    }
    if (document.documentElement.scrollTop > 2500 || document.body.scrollTop > 2600){
        d5.classList.add("a");
    }






    console.log(document.documentElement.scrollTop || document.body.scrollTop);
    if(document.documentElement.scrollTop > 800 || document.body.scrollTop > 800){
        toTop.style.display = 'block';
    }else{
        toTop.style.display = 'none';
    }


    toTop.addEventListener('click',function() {
        window.scrollTo(0, 0);
        window.scrollTo({
            top:0,
            behavior:'smooth'

        })
    });
};




//选项卡
var nav_1 = document.querySelectorAll(".main-4 .r-2 .c-1 ul > li");
var main = document.querySelectorAll(".main-4 .r-2 .cc-2 > div");


for(var i = 0;i<nav_1.length; i++){
    nav_1[i].index = i;
    nav_1[i].addEventListener('click',function(){
        for(var j=0 ;j<nav_1.length; j++){
            nav_1[j].classList.remove('li-1');
            main[j].classList.remove('li-1');
        }
        console.log(this);
        console.log(this.index);
        this.classList.add('li-1');
        main[this.index].classList.add('li-1');
    })
}






//二维码点击

var btn1 = document.querySelector(".main-5 .rr-2 .dt_nav_btn");
console.log(btn1);

var btn2 = document.querySelector(".main-5 .rr-2 .dt_nav_btn1");
console.log(btn2);

var btn3 = document.querySelector(".main-5 .rr-2 .dt_nav_btn2");
console.log(btn3);

var btn4 = document.querySelector(".main-5 .rr-2 .dt_nav_btn3");
console.log(btn4);



var content1 = document.querySelector(".main-5 .rr-2 .dt_nav_content");
console.log(btn1);

var content2 = document.querySelector(".main-5 .rr-2 .dt_nav_content1");
console.log(btn2);

var content3 = document.querySelector(".main-5 .rr-2 .dt_nav_content2");
console.log(btn3);

var content4 = document.querySelector(".main-5 .rr-2 .dt_nav_content3");
console.log(btn4);



var dj = document.querySelector(".dj");
console.log(dj);

var dj_btn = document.querySelector(".dj-btn");
console.log(dj_btn);


btn1.addEventListener('click',function () {
    dj.style.display = "block";
});

dj_btn.addEventListener('click',function(){
    dj.style.display =  'none';
});

content1.addEventListener('click',function () {
    dj.style.display = "block";
});




var dj1 = document.querySelector(".dj1");
console.log(dj1);

var dj_btn1 = document.querySelector(".dj-btn1");
console.log(dj_btn1);



btn2.addEventListener('click',function () {
    dj1.style.display = "block";
});

dj_btn1.addEventListener('click',function(){
    dj1.style.display =  'none';
});

content2.addEventListener('click',function () {
    dj1.style.display = "block";
});



var dj2 = document.querySelector(".dj2");
console.log(dj2);

var dj_btn2 = document.querySelector(".dj-btn2");
console.log(dj_btn2);



btn3.addEventListener('click',function () {
    dj2.style.display = "block";
});

dj_btn2.addEventListener('click',function(){
    dj2.style.display =  'none';
});

content3.addEventListener('click',function () {
    dj2.style.display = "block";
});



var dj3 = document.querySelector(".dj3");
console.log(dj3);

var dj_btn3 = document.querySelector(".dj-btn3");
console.log(dj_btn3);



btn4.addEventListener('click',function () {
    dj3.style.display = "block";
});

dj_btn3.addEventListener('click',function(){
    dj3.style.display =  'none';
});

content4.addEventListener('click',function () {
    dj3.style.display = "block";
});

